<template>
  <div class="">
    <div class="title">周末去哪</div>
    <ul class="item border-bottom" v-for="item of titlelist" :key="item.id">
      <div class="item-img-wrapper">
        <img class="item-img" :src="item.url">
      </div>
      <div class="item-info">
        <p class="item-title">{{item.title}}</p>
        <p class="item-desc">{{item.desc}}</p>
      </div>
    </ul>
  </div>

</template>

<script>
  export default {
    name: "Weekend",
    data() {
      return {
        titlelist: [
          {
            id: '01',
            url: '//imgs.qunarzz.com/vs_ceph_vs_tts/4b05ef1b-a18e-4038-b568-9e8e16f3b23b.jpg_r_390x260x90_1a70a769.jpg',
            title: '北京-西安 5天自由行',
            desc: '轻奢西安🔥豪华五星希尔顿住宿5日自由行（含燕国古装体验+兵马俑华清池）'
          },
          {
            id: '02',
            url: '//imgs.qunarzz.com/vs_ceph_vs_tts/6a0c4596-436e-42f9-98d9-e035e9018322.jpg_r_480x320x90_f30a3807.jpg',
            title: '北京-上海 6天跟团游',
            desc: '奢享华东♥住乌镇周庄+全程高端酒店♥古战船游太湖，品龙井♥上海杭州双飞5天'
          },
          {
            id: '03',
            url: '//imgs.qunarzz.com/p/tts7/1707/eb/2eaa510fcc3d4a02.jpg_r_390x260x90_a00e216b.jpg',
            title: '北京-四川成都 6天跟团游',
            desc: '吃火锅 看川剧 随抖音走成都！成都-峨眉山-乐山-都江堰-熊猫乐园古镇6日游'
          },
          {
            id: '04',
            url: '//imgs.qunarzz.com/vs_ceph_vs_tts/9c4697d2-aa47-4618-8400-8bf4840753c7.jpg_r_480x320x90_358e2fe0.jpg',
            title: '北京-大阪 6天跟团游',
            desc: '⭐暑期热卖⭐本州6日⭐东京1天自由活动⭐打卡镰仓江之岛⭐早去晚回航班'
          },
        ]
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .title
    margin-top .1rem
    line-height .6rem
    background #eee
    text-indent .2rem
  .item-img-wrapper
    overflow hidden
    height 0
    padding .1rem
    padding-bottom 33.9%
    .item-img
      width 100%
  .item-info
    padding .1rem
    .item-title
      line-height .54rem
      font-size .32rem
      ellipsis()
    .item-desc
      line-height .4rem
      color #ccc
      ellipsis()

</style>
